<?php //$this->headScript()->prependFile($this->myBaseUrl(array(), 'home') . 'public/js/jquery.validate.js'); ?>
<?php $this->headScript()->appendFile($this->myBaseUrl(array(), 'home') . 'public/js/jquery.validate.js'); ?>
<script type="text/javascript">
    $(document).ready(function(){
        var validator = jQuery("#login").validate({ 
            rules: {
                username: {
                    required: true,
                    htmltags: true
                    //validusername: true,
                }, 
                password: {
                    required: true,
                    htmltags: true
                    //validusername: true,
                } 
            }, 
            messages: { 
                username: { 
                    required: "<span style='color: red;'>Por favor ingrese su nombre.</span>",
                    htmltags: "<span style='color: red;'>No se permiten etiquetas html</span>"
                    //validusername: "Special characters not allowed.",
                },
                password: {
                    required: "<span style='color: red;'>Por favor ingrese su contraseña.</span>",
                    htmltags: "<span style='color: red;'>No se permiten etiquetas html</span>"
                    //validusername: "Special characters not allowed.",
                }
            },
            // the errorPlacement has to take the table layout into account 
            errorElement:"div",
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {		
			  
                    //jQuery("#errDivId").html();	
                    jQuery("#errDivId").show();
                } else {
                    jQuery("#errDivId").hide();
                }
            },
            errorPlacement: function(error, element) { 
                error.appendTo(element.parent());			 
            }, 
            // specifying a submitHandler prevents the default submit, good for the demo 
            submitHandler: function() {
                document.login.submit();
            }, 
            // set this class to error-labels to indicate valid fields 
            success: function(label) { 
                // set   as text for IE 
                label.html(); 
            } 
        }); 
    });
</script>




<!-- content start here-->
<!--<div class="gb-layout-cell gb-content" style="min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -100px;vertical-align:bottom;">-->
<div class="gb-layout-cell gb-content">

    <!-- -->
    <div class="gb-box gb-post" style="left: 29%; top: 50%;">
        <div class="gb-box-body gb-post-body" style="width: 500px; margin-bottom: 100px; margin-top: 50px;">
            <div class="gb-post-inner gb-article">
                <h2 class="gb-postheader">Identificación de bibliotecario</h2><br />
                <div class="gb-postcontent" style="float: right; width: 300px">
                    <form name="login" id="login" method="post" action="">
                        <fieldset style="border: none; padding: 0px; margin: 0px; margin-left: 15px;">
                            <div class="gb-box gb-post" style="margin: 0px;">
                                <div class="gb-box-body gb-post-body" style="padding: 20px;">
                                    <div>
                                        <h3 style="margin: 10px 0pt;">Nombre de usuario<span style="color: brown;">*</span></h3>
                                        <?php echo $this->form->username; ?>
                                    </div>
                                    <div>
                                        <h3 style="margin: 10px 0pt;">Contraseña<span style="color: brown;"">*</span></h3>
                                        <?php echo $this->form->password; ?>
                                    </div>
                                    <div>
                                        <br /><br />
                                    </div>
                                    <div style="width: auto; float: right;">
                                        <!--<span class="gb-button-wrapper">
                                            <span class="l"></span><span class="r"></span>
                                            <input type="submit" name="Submit" class="button gb-button validate" value="Acceso" />-->
                                            <?php echo $this->form->SaveNotification; ?>
                                        <!--</span>-->
                                        
                                    </div><div class="cleared"></div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <div>
                    <img src="<?php echo $this->myBaseUrl(array(), 'home');?>public/img/login_logo.png" style="margin-bottom: 10px;"/>
                    <p>
                        Por favor utilice un nombre de usuario y una contraseña válidos para poder tener acceso a la administración.
                    </p>
                    <div class="cleared"></div>
                </div>
                <?php if ($this->messagebox) {?>
                <div class="errMsg" style="color: brown; color: brown; margin-top: 15px; text-align: right;">
                    <?php echo $this->messagebox['message']; ?>
                <?php } else {?>
                <div>
                    &nbsp;
                <?php }?>
                </div>
                <div class="cleared"></div>
            </div>
            <div class="cleared"></div>
        </div>
    </div>
    <!-- -->
    <div class="cleared"></div>
</div>
